<template>
  <div class="container">
    <div class="zscq">
      <section class="bannerimg" style="background:url(/img/qybsbbanner.jpg) no-repeat center"></section>
      <section class="zssc1 zssc">
        <h3>精选知识产权服务</h3>
        <p class="xq">为产品提供360度全方位保护</p>
        <div class="ct">
          <ul class="af">
            <li class="li1">
              <h4>商标注册</h4>
              <p style="background: none">为您精挑细选<br/>各类实用企业服务</p>
            </li>
            <li  v-for="(gs,id) in title.zym.service[0].threeServiceRes.slice(0,1)" :class="'li'+(id+2)">
              <a :href="'/ServiceDetails/'+gs.id+'?name='+gs.pid" target="_blank">
                <h4>{{gs.servicename}}</h4>
                <p>{{gs.remark}}</p>
                <span class="bt"></span>
              </a>
            </li>
            <li   class="li2">
              <a :href="'/ServiceDetails/'+202+'?name='+68" target="_blank">
                <h4>国际商标</h4>
                <p>国际商标注册</p>
                <span class="bt"></span>
              </a>
            </li>
            <li  v-for="(gs,id) in title.zym.service[0].threeServiceRes.slice(1,2)" :class="'li'+(id+3)">
              <a :href="'/ServiceDetails/'+gs.id+'?name='+gs.pid" target="_blank">
                <h4>{{gs.servicename}}</h4>
                <p>{{gs.remark}}</p>
                <span class="bt"></span>
              </a>
            </li>
          </ul>
        </div>
      </section>
      <section class="zssc2 zssc">
        <h3>商标工具</h3>
        <p class="xq" style="background: none">与国家商标局数据库同步，免费查询商标</p>
        <ul class="af">
          <li  v-for="(gs,id) in title.zym.service[1].threeServiceRes"  @click="xqymtz(gs.id,gs.pid)">
            <p class="p1">{{gs.servicename}}</p>
            <p class="p2">{{gs.remark}}</p>
          </li>
        </ul>
      </section>
      <section class="zssc3 zssc">
        <h3>信息变更</h3>
        <p class="xq">专业的事交给专业的人</p>
        <ul class="af">
          <li v-for="(gs,id) in title.zym.service[2].threeServiceRes" :class="['li'+(id+1),(id+1)%3==0?'last':'']"><a :href="'/ServiceDetails/'+gs.id+'?name='+gs.pid" target="_blank">
            <h4>{{gs.servicename}}</h4>
            <p>{{gs.remark}}</p>
          </a></li>
        </ul>
      </section>
      <section class="zssc4 zssc">
        <h3>版权服务</h3>
        <p class="xq" style="background: none">专业顾问，经验丰富，快速响应，顺利拿证</p>
        <ul class="af">
          <li v-for="(gs,id) in title.zym.service[3].threeServiceRes" :class="['li'+(id+1),(id+1)%3==0?'last':'']" @click="xqymtz(gs.id,gs.pid)" >
            <h4>{{gs.servicename}}</h4>
            <p>{{gs.remark}}</p>
          </li>
        </ul>
      </section>
      <section class="zssc5 zssc">
        <h3>专利服务</h3>
        <p class="xq">能保护能赚钱 申请专利我划算</p>
        <ul class="af">
          <li v-for="(gs,id) in title.zym.service[4].threeServiceRes" :class="['li'+(id+1)]">
            <a :href="'/ServiceDetails/'+gs.id+'?name='+gs.pid" target="_blank">
              <h4>{{gs.servicename}}</h4>
              <p>{{gs.remark}}</p>
              <span></span>
            </a>
          </li>
        </ul>
      </section>
      <section class="zssc zssc6 cssc2">
        <h3>咨询管家</h3>
        <p class="xq">专业管家在线服务，一对一免费咨询</p>
        <ul class="af">
          <li  v-for="(gj,gji) in title.gj" :class="['li'+(gji+1),(gji+1)%5==0?'last':'']" :key="gji">
            <div class="nm" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+gj.specialavatarone+') no-repeat'}">
              <h4>{{gj.username}}</h4>
              <p>{{gjname[gji]}}</p>
            </div>
            <div class="hover af">
              <img :src="'https://exam.zhonghaiqihang.com'+gj.specialavatartwo" width="157" height="158">
              <div>
                <p class="p1">{{gj.username}}  <span>{{title.zym.label}}</span></p>
                <p class="p2">电话： <span>{{gj.mobile}}</span></p>
                <p class="p3">擅长: {{gj.major}}</p>
                <a :href="gj.cclink" class="zx" target="_blank">在线咨询</a>
              </div>
            </div>
          </li>
        </ul>
      </section>
      <my-heart></my-heart>
    </div>
    <my-ft></my-ft>

  </div>
</template>
<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        selenv:false,
        title:null,
        yqljData:null,
        dlzt:'',
        fuwu:1,
        sjsz:[],
        gjname:['经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问','经营资质顾问'],
      }
    },
    async asyncData ({ params }) {
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'67'
      }});
    let nh4 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {nav:nh.data,zym:nh3.data,gj:nh4.data};
    return { title: data}
  },
  mounted:function(){
    $('.tbnava2').addClass('select');
    let a = document.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    this.dlzt = cookie;
    $(document).ready(function(){
      $('.tbnava2').addClass('select');
    })

  }
  ,head () {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript},
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },methods:{
    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    }
    ,zdwy:function(e){
      $('.tbnava2').addClass('select');
      if(e==1){
        this.selenv = true;
      }else if(e==0){
        this.selenv = false;
      }

    }
  }
  }
</script>

<style>

</style>
